<template>
  <div class="setting-content">
    <h2 class="setting-header">
      <strong>实名认证</strong>
    </h2>
    <div class="content">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="账号信息" :name="1">
          <!-- 登录账号 -->
          <div class="login-info">
            <div class="box-title">登录账号</div>
            <div class="phone-box box">
              <div class="title">登录手机
                <el-tag type="success">已验证</el-tag>
              </div>
              <div class="phone">
                <el-input v-model="userInfo.phoneNum" disabled></el-input>
                <el-button>更换号码</el-button>
              </div>
            </div>
            <div class="psd-box box">
              <div class="title">登录密码</div>
              <div class="psd">
                <el-input v-model="userInfo.password" type="password" disabled></el-input>
                <el-button>修改密码</el-button>
              </div>
            </div>
          </div>
          <!-- 第三方账号绑定 -->
          <div class="third-party-accounts">
            <div class="box-title">第三方账号绑定</div>
            <div class="third-party">
              <div class="title">使用以下任一方式都可登录后台</div>
              <RuifoxTable
                :loading="tableLoading"
                :default-index="true"
                border
                :headerTextAlign="'center'"
                v-model:tableData="tableData"
                v-model:fieldList="fieldList"
              >
                <template #status='{element}'>
                  <el-tag type="success" v-if="element.status == 1">使用中</el-tag>
                  <el-tag type="danger" v-else>未使用</el-tag>
                </template>
                <template #options='{element}'>
                  <div class="table-td-option">
                    <el-button type="primary" link @click="handleRelieve(element)">
                      解除绑定
                    </el-button>
                  </div>
                </template>
              </RuifoxTable>
            </div>
            <!-- 可以绑定的第三方账号 -->
            <div class="can-bind-third-party">
              <div class="box-title">可绑定的第三方账号：</div>
              <div class="third-party-list">
                <div class="party-item" v-for="(item, index) in thirdPartyList" :key="index">
                  <i class="iconfont" :class="item.status == 1 ? 'used':''" v-html="item.iconCode"></i>
                  <span>{{item.accountName}}</span>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="实名认证" :name="2">
          <div class="real-name-authentication">
            <div class="top">
              <div class="left">
                <div class="info">
                  <div class="title">个人认证</div>
                  <div>
                    <div class="row">
                      <div class="label">认证类型</div>
                      <div class="value">微信认证</div>
                    </div>
                    <div class="row">
                      <div class="label">认证完成时间</div>
                      <div class="value">2022-03-06</div>
                    </div>
                  </div>
                  <div>
                    <div class="row">
                      <div class="label">认证人</div>
                      <div class="value">RUIFOX</div>
                    </div>
                    <div class="row">
                      <div class="label">微信id</div>
                      <div class="value">xxxxxxx</div>
                    </div>
                  </div>
                </div>
                <el-divider/>
                <div class="operations">
                  <el-button type="primary">变更微信认证</el-button>
                </div>
              </div>
              <div class="background-pic"></div>
            </div>
            <div class="bottom"></div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'

const activeName = ref(1)
const userInfo = ref({
  phoneNum: '18888888888',
  password: '123456'
})

const fieldList = ref([
  {
    title: '绑定账号信息',
    name: 'accountName',
  },
  {
    title: '详情',
    name: 'details',
  },
  {
    title: '绑定时间',
    name: 'bindDate',
  },
  {
    title: '状态',
    name: 'status',
  },
  {
    title: '操作',
    width: 180,
    fixed: 'right',
    name: 'options'
  }
])
const tableData = ref([
  { accountName: '微信', details: '微信用户1', bindDate: '2022-01-01', status: 1 },
  { accountName: '支付宝', details: '支付宝用户1', bindDate: '2022-02-01', status: 1 },
])

const handleRelieve = (val) => {
  console.log(val);
}

const thirdPartyList = ref([
  { accountName: '微信', id: 0, status: 1, iconCode: '&#xe6b3;' },
  { accountName: '微博', id: 0, status: 0, iconCode: '&#xe6c3;' },
])


</script>
<style scoped lang='scss'>
.setting-content{
  color: #333;
  .content{
    .login-info{
      margin-bottom: 40px;
      .box-title{
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 20px;
      }
      .box{
        .title{
          font-weight: 600;
        }
        .phone, .psd{
          display: flex;
          align-items: center;
          .el-input{
            width: 250px;
            margin: 10px 10px 10px 0;
          }
        }
      }
    }
    .third-party-accounts{
      margin-bottom: 40px;
      .box-title{
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 10px;
      }
      .third-party{
        .title{
          margin-bottom: 10px;
        }
        ::v-deep(.ruifox-table-new){
          td .cell{
            justify-content: center;
          }
        }
      }
    }
    .can-bind-third-party{
      display: flex;
      align-items: center;
      margin: 20px 0 10px 0;
      .box-title{
        font-weight: 600;
        margin-right: 20px;
      }
      .third-party-list{
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
       .party-item{
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          margin: 10px 10px 10px 0;
          gap: 5px;
          i{
            font-size: 24px;
          }
          span{
            color: #666;
          }
          .used{
            color: $mainColor;
          }
        }
      }
    }
    .real-name-authentication{
      min-width: 893px;
      margin-right: 26px;
      display: flex;
      flex-direction: column;
      .top{
        padding: 16px 16px 0px;
        width: 100%;
        height: fit-content;
        border-radius: 4px;
        border: 1px solid rgb(229, 229, 229);
        display: flex;
        flex-direction: column;
        position: relative;
        margin-bottom: 24px;
        background-image: url('~@/assets/homeBanner/11.png');
        background-size: cover;
        .left{
          width: 696px;
          .info{
            display: flex;
            flex-direction: column;
            padding: 8px;
            .title{
              font-size: 18px;
              font-weight: 500;
              line-height: 26px;
              letter-spacing: 0px;
              color: rgb(51, 51, 51);
              user-select: none;
              margin-bottom: 32px;
            }
            .row{
              display: inline-block;
              margin-right: 36px;
              margin-bottom: 16px;
              font-size: 14px;
              line-height: 22px;
              letter-spacing: 0px;
              .label{
                display: inline-block;
                width: 112px;
                margin-right: 24px;
                font-weight: normal;
                color: rgb(85, 85, 85);
                user-select: none;
              }
              .value{
                display: inline-block;
                width: 144px;
                margin-right: 24px;
                font-weight: 600;
                color: rgb(51, 51, 51);
              }
            }
          }
          .operations{
            display: flex;
            margin: 24px 0px;
            align-items: center;
          }
        }
      }
      .background-pic{
        position: absolute;
        width: 144px;
        height: 105px;
        right: 32px;
        bottom: 32px;
        background-image: url('~@/assets/homeBanner/22.png');
        background-size: cover;
      }
    }
  }
}
</style>